/**
 * 声明文章编辑器组件blogArticleEditor
 * 若传入(prop)文章内容则在编辑器中显示文章和标题
 * 适用于文章的增加和修改功能
 */

const blogArticleEditor = {
    // 声明blogArticleEditor接受一个参数为articleInfo，应该包含title,content
    props: ['articleInfo'],
    data() {
        editorInst: null
    },
    // 定义组件HTML模板
    template: `
    <el-form label-width="100px">
      <el-form-item style="margin-top: 20px" label="标题">
        <el-input style="max-width: 600px" v-model="articleInfo.title">{{articleInfo.title}}</el-input>
      </el-form-item>
      </el-form-item>
      <el-form-item label="正文">
        <textarea ref="editor" style="max-width: 600px" v-model="articleInfo.content">{{articleInfo.content}}</textarea>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$emit('finish')">完成</el-button>
        <el-button @click="$emit('cancel')">取消</el-button>
      </el-form-item>
    </el-form>
    `,
    mounted() {
        // const id = 'editor' + Math.random(); //这是什么生成一个随机ID啊
        // this.$refs.editor.setAttribute('id', id)
        // editormd(id, {
        //     width  : "100%",
        //     height : "100%",
        //     path   : "/src/editor.md-master/lib/"// 这是什么 不知道
        // });
    }
}

Vue.component('blog-article-editor', blogArticleEditor)